<style type="text/css">
.wx-menu{
}
.wx-menu .am-menu-stack .am-menu-nav{
    border:0;
    background:none;
}
.wx-menu .am-menu-stack > a.am-menu-toggle{
    display:block;
    position:relative;
    top:0;
    right:0;
    left:0;
    right:0;
    height:auto;
    line-height:35px;
    padding:0 15px;
    font-size:12px;
    width:100%;
    text-align:left;
    background:#4A77AC;
    color:#fff;
    z-index:2
}
.am-menu-stack .am-menu-nav>li.am-parent>a:after{
    content:'\f0dd';
    font-size:15px;
    color:#999;
    top:.6rem;
}
.am-menu-stack .am-menu-nav>li.am-parent.am-open>a:after{
    top:1.2rem;
}
.wx-menu .am-menu-stack i{
    color:#7DA4D1;
    font-size:15px;
    margin-right:5px;
    text-indent:0
}
.wx-menu .am-menu-stack .am-menu-nav>li,.wx-menu .am-menu-stack .am-menu-nav>li .am-menu-sub li{
    float:none;
    width:100%;
}
.wx-menu .am-menu-stack .am-menu-nav>li .am-menu-sub{
    position:relative;
    padding-bottom:8px;
}
.wx-menu .am-menu-stack .am-menu-nav > li >a,.wx-menu .am-menu-stack .am-menu-sub,.wx-menu .am-menu-stack .am-menu-nav>li.am-parent.am-open .am-menu-sub{
    line-height:35px;
    height:auto;
    background:none;
    border:0;
    font-size:12px;
    text-indent:15px;
}
.wx-menu .am-menu-stack .am-menu-sub > li{
    line-height:24px;
    height:24px;
}
.wx-menu .am-menu-stack .am-menu-sub > li > a{
    text-indent:28px;
    line-height:24px;
    height:24px
}
.wx-menu .am-menu-stack .am-menu-nav > li.am-parent>a:after{
    position:absolute;
    left:0;
}
.wx-table{
    padding-bottom:15px;
    border:1px solid #eee;
}
.wx-table-title{
    display:flex;
    flex-wrap:nowrap;
    height:55px;
    line-height:35px;
    padding:10px 15px;
}
.wx-table-title .am-form-group{
    margin-left:auto;
}
.wx-table .am-table{
    margin:0 15px;
    width:calc(100% - 30px);
    width:-webkit-calc(100% - 30px);
}
.wx-table .am-table thead{
    background:#f5f5f5;
}
.wx-table .am-table .am-btn-toolbar .am-btn-group > .am-btn{
    font-size:12px;
}
.wx-table .am-table label{
    display:inline-block;
    padding:0 5px;
    margin-left:5px;
    border:1px solid #eee;
    background:linear-gradient(to bottom, #fff, #f5f5f5); ;
    color:#4a77ac;
    font-size:12px;
    border-radius:3px;
    font-weight:normal;
}
.wx-table .am-table a{
    color:#666;
}
.wx-table .am-table a.qcode{
    display:inline-block;
    padding:0 5px;
    margin-left:5px;
    border:1px solid #4a77ac;
    color:#4a77ac;
    font-size:12px;
    border-radius:3px;
}
.wx-menu .am-menu-stack .am-menu-sub a{
	border-bottom:0;
}
</style>
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title a m-cf">企微通讯录</div>
                </div>
                <div class="widget-body am-cf">
                    <div class="am-g">
                        <div class="am-u-sm-3 wx-menu">
                        <nav data-am-widget="menu" class="am-menu am-menu-stack" data-am-menu-collapse> 
                        <ul class="am-menu-nav am-avg-sm-1">
                        {{volist name="department" id="vo"}}
                            <a href="{{:url('index')}}" class="am-menu-toggle">
                               <i class="am-icon-folder"></i>{{$vo.name}}
                            </a>
                            <ul class="am-menu-nav am-avg-sm-1">
                            {{if isset($vo['children'])}}
                                {{volist name="vo.children" id="children"}}
                                <li class="am-parent">
                                    <a href="{{:url('index',['id'=>$children['id']])}}"><i class="am-icon-folder"></i>{{$children.name}}</a>
                                    <ul class="am-menu-sub am-avg-sm-2">
                                    {{if isset($children['children'])}}
                                    {{volist name="children.children" id="c"}}
                                        <li>
                                            <a href="{{:url('index',['id'=>$c['id']])}}"><i class="am-icon-folder"></i>{{$c.name}}</a>
                                        </li>
                                    {{/volist}}
                                    {{/if}}
                                    </ul>
                                </li>
                                {{/volist}}
                                {{/if}}
                            </ul>
                            {{/volist}}

                        </nav>
                        </div>
                        <div class="am-u-sm-9">
                                <div class="wx-table">
                                    <div class="wx-table-title am-text-middle">
                                        <h3>{{$title}}({{$count}}人)</h3>
                                        <div class="am-form-group">
                                            <div class="am-btn-toolbar">
                                                <div class="am-btn-group am-btn-group-xs"><a href="javascript:;" class="am-btn am-btn-secondary am-btn-sm apirefresh">
                                                    <i class="am-icon-refresh"></i> 同步数据</a></div>
                                            </div>
                                        </div>
                                    </div>
                                    <table class="am-table am-text-nowrap am-table-hover am-table-bordered">
                                        <thead>
                                            <tr>
                                                <th style="width:50px;text-align:center"><input type="checkbox"></th>
                                                <th style="width:160px">姓名</th>
                            
                                                <th style="width:200px">部门</th>
                                                <th>手机</th>
                                                <th>邮箱</th>
                                                <th style="width:180px">二维码</th>
                                                
                                                <th style="width:120px;text-align:center">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{volist name="userlist" id="user"}}
                                            <tr>
                                                <td style="width:50px;text-align:center"><input type="checkbox"></td>
                                                <td>{{$user.name}} <!--<label>负责人</label>--></td>
                                   
                                                <td>{{$user.department_name}}</td>
                                                <td>{{$user.mobile}}</td>
                                                <td>{{$user.email}}</td>
                                                <td>{{if $user.qr_code}}<img src="{{$user['qr_code']}}" />{{/if}}</td>
                                                <td style="width:100px;text-align:center"><a href="javascript:;" class="edit_user" data-userid="{{$user.userid}}" data-name="{{$user.name}}">修改</a></td>
                                            </tr>
                                            {{/volist}}
                                            
                                        </tbody>
                                    </table>
                                </div>    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模板：修改会员 -->
<script id="tpl-edituser" type="text/template">
    <div class="am-padding-xs am-padding-top">
        <form class="am-form tpl-form-line-form" method="post" action="">
				<div class="am-form-group">
				    <label class="am-u-sm-3 am-form-label"> 手机号码 </label>
				    <div class="am-u-sm-8 am-u-end">
				        <input type="text" min="0" class="tpl-form-input" placeholder="请输入手机号码" id="mobile" name="user[mobile]" >
				    </div>
				</div>

                <div class="am-form-group">
				    <label class="am-u-sm-3 am-form-label"> 邮箱 </label>
				    <div class="am-u-sm-8 am-u-end">
				        <input type="text" min="0" class="tpl-form-input" placeholder="请输入邮箱地址" id="email" name="user[email]"  >
				    </div>
				</div>

				<div class="am-form-group">
				    <label class="am-u-sm-3 am-form-label"> 二维码 </label>
				    <div class="am-u-sm-8 am-u-end">
						<div class="am-form-file">
							<div class="am-form-file">
								<button type="button" class="upload-file am-btn am-btn-secondary am-radius">
									<i class="am-icon-cloud-upload"></i> 选择图片
								</button>
								<div class="uploader-list am-cf" id="qr_code"></div>
							</div>
						</div>
				    </div>
				</div>
        </form>
    </div>
</script>
{{include file="layouts/_template/file_library" /}}

<!-- 图片文件列表模板 -->
<script id="tpl-file-item" type="text/template">
    {{ each list }}
    <div class="file-item">
        <a href="{{ $value.file_path }}" title="点击查看大图" target="_blank">
            <img src="{{ $value.file_path }}">
        </a>
        <input type="hidden" name="{{ name }}" value="{{ $value.file_path }}">
        <i class="iconfont icon-shanchu file-item-delete"></i>
    </div>
    {{ /each }}
</script>
<script>
    $(function () {
        $('.apirefresh').on('click', function() {
            var index = layer.load(0, {shade: false});
            $(this).myAjaxSubmit({
                url: '<?= url('refresh') ?>',
                data: {},
                success:function (result) {
                    layer.close(index); // 关闭 loading
                }
            });
        });


        /**
         * 修改会员等级
		 * @type {jQuery|HTMLElement}
         */
        $('.edit_user').on('click', function () {
            var data = $(this).data();
            var typeid = $(this).data('typeid');
            $.showModal({
                title: '修改会员（'+ $(this).data('name') +'）'
                , area: '460px'
                , content: template('tpl-edituser', data)
                , uCheck: true
                , success: function ($content) {
                    $content.find('.upload-file').selectImages({
                        name: 'user[qr_code]',
                        multiple: false
                    });
                                    $content.find('form').ajaxSubmit({
										type: 'post',
										dataType: 'json',
										url: '<?= url('userinfo') ?>',
										data: {userid: data.userid},
										success: function (result) {
											$('#email').val(result.email);
											$('#mobile').val(result.mobile);
                                            if(result.qr_code){
                                                $('#qr_code').html('<div class="file-item">'+
                                                '<a href="" title="点击查看大图" target="_blank">'+
                                                '<img src="'+result.qr_code+'">'+
                                                            '</a>'+
                                                        '<input type="hidden" name="user[qr_code]" value="'+result.qr_code+'">'+
                                                        ' <i class="iconfont icon-shanchu file-item-delete"></i>'+
                                                    '</div>');
                                            }
										}
									});
                }
                , yes: function ($content) {
                    $content.find('form').myAjaxSubmit({
                        url: '<?= url('saveuserinfo') ?>',
                        data: {userid: data.userid}
                    });
                    return true;
                }
            });
        });

    });
</script>